<template>
	<view class="container">		
		<view class="swiper-content">
			<text class="iconfont icon-fanhui" @tap="handleBack"></text>
			<template v-if="detaiList.type==0">
				<swiper class="swiper" @animationfinish="swiperChange" :current="currentSwiper " circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<template v-if="Array.isArray(detaiList.thumb_url)">
						<swiper-item v-for="(item,index) in detaiList.thumb_url" :key="index">							
							<image :src="item.path" mode=""></image>
						</swiper-item>
					</template>	
					<template v-else>
						<swiper-item>
							<image :src="detaiList.thumb_url.path" mode=""></image>
						</swiper-item>
					</template>	
				</swiper>
			</template>
			<template v-else>
				 <video 
				 id="myVideo" 
				 :src="detaiList.media.path"
				 :poster="detaiList.media.cover"
				 @error="videoErrorCallback" 
				 :danmu-list="danmuList"  
				 danmu-btn 
				 direction="90"
				 object-fit="cover"
				 class="my-video"></video>
			</template>
		</view>	
		<view class="content">
			
			<view class="title">
				{{detaiList.title}}
			</view>
			<view class="offer">				
                  报价：{{detaiList.offer}}万    {{detaiList.area}}m² | {{detaiList.house_type}} | <span v-for="(item,index) in detaiList.design_style">{{item.name}}</span>
			</view>
			<view class="create">
				创建于 {{createTime}}
			</view>
			<u-parse :html="content" :tag-style="style"></u-parse>
<!-- 			<view class="appeal">
				业主诉求
			</view>
			<view class="appeal-content">
				卫生间空间比较大，相反厨房空间反而不够用，需要在格局上进行调整，满足屋主的使用需求。
			</view>
			<view class="project">
				设计方案
			</view>
			<view class="project-content">
				受整体房屋结构的影响，房屋的格局没有进行较大的改造，卫生间空间较大，厨房空间较小因此在设计中，适当的缩小了卫生间的空间，进行了内嵌式的冰箱设计，将厨房的功能性设备外移，增加厨房的使用空间。
			</view>
			<view class="floor-plan">
				<view class="title">
					户型图
				</view>
				<image :src="`${baseimg}/static/common/swiper-2.jpg`" mode="" class="floor-img"></image>
			</view>
			<view class="bathroom">
				<view class="title">
					卫生间
				</view>
				<image :src="`${baseimg}/static/common/swiper-1.jpg`" mode="" class="bathroom-img"></image>
				<image :src="`${baseimg}/static/common/swiper-3.jpg`" mode="" class="bathroom-img"></image>
				<view class="bathroom-content">
					受整体房屋结构的影响，房屋的格局没有进行较大的改造，卫生间空间较大，厨房空间较小因此在设计中，适当的缩小了卫生间的空间，进行了内嵌式的冰箱设计，将厨房的功能性设备外移，增加厨房的使用空间。
				</view>
			</view>
			<view class=" kitchen">
				<view class="title">
					厨房
				</view>
				<image :src="`${baseimg}/static/common/swiper-1.jpg`" mode="" class="kitchen-img"></image>
				<image :src="`${baseimg}/static/common/swiper-2.jpg`" mode="" class="kitchen-img"></image>
				<image :src="`${baseimg}/static/common/swiper-3.jpg`" mode="" class="kitchen-img"></image>
				<view class="mini-logo df-bt">
					<view class="name">
						图中包含商品（5）：
					</view>
					<image :src="`${baseimg}/static/common/financial-click.png`" mode="" class="logo"></image>
					<image :src="`${baseimg}/static/common/home-click.png`" mode="" class="logo"></image>
					<image :src="`${baseimg}/static/common/icon_collection.png`" mode="" class="logo"></image>
					<image :src="`${baseimg}/static/common/more.png`" mode="" class="logo-more"></image>
				</view>
				<view class="kitchen-content">
					受整体房屋结构的影响，房屋的格局没有进行较大的改造，卫生间空间较大，厨房空间较小因此在设计
				</view>
				
			</view> -->
		</view>
		<view class="place"></view>
		<view class="comment-box">
			<view class="tab-nav clearfix">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="switchType(1)">
						转发({{detaiList.forward_num}})
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="switchType(2)">
						评论({{detaiList.comment_num}})
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==3}" @click="switchType(3)">
						赞({{detaiList.support_num}})
					</view>
				</view>
			</view>
			<view class="list">
				<!-- nav-item -->
				<view class="nav_item share" v-show="isActive==1">
					<view class="content-list" v-for="(item,index) in forwardList" :key="item.id">
						<image :src="item.user_id.avatar.path" mode="" class="user-img"></image>
						<view class="right">
							<view class="user-name">{{item.user_id.username}}</view>
							<view class="status">
								<text>转发动态</text>
								<text class="time">{{item.create_time | dateformat('MM-DD HH:mm')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="nav_item comment" v-show="isActive==2">
					<view class="item" v-for="(item1,index1) in commonList" :key="index1" @click="replyOne(item1)" @longpress="delReply(item1.id)">
						<image :src="item1.user_id.avatar.path" mode=""></image>
						<view class="ask">
							<view class="name">{{item1.user_id.username}}</view>
							<view class="info">{{item1.content}}<span>{{$utils.getTimeRelation(item1.create_time*1000)}}</span></view>
							<view class="askList">
								<view class="item" v-for="(item2,index2) in item1.sub_reply" :key="index2" @click.stop="replyChild(item2)" @longpress.stop="delReply(item2.id)">
									<image :src="item2.user_id.avatar.path" mode=""></image>
									<view class="ask">
										<view class="name">{{item2.user_id.username}}</view>
										<view class="info">
											<view>回复<span>{{item2.reply_id.username}}</span>：{{item2.content}}<span>{{$utils.getTimeRelation(item2.create_time*1000)}}</span></view>
											<!-- <view>我们家就是这样设计的我们家就是这样设计的我们家就是这样设计的我们家就是这样设计的<span>刚刚</span></view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="delBox">
							删除
						</view> -->
					</view>
					<!-- <view class="open-more">展开更多评论</view> -->
				</view>
				<view class="nav_item zan" v-show="isActive==3">
					<view class="content-list" v-for="(item,index) in supportList" :key="item.id">
						<image :src="item.user_id.avatar.path" mode="" class="user-img"></image>
						<view class="right">
							<view class="user-name">{{item.user_id.username}}</view>
							<view class="status">
								<text>赞了你的动态</text>
								<text class="time">{{item.create_time | dateformat('MM-DD HH:mm')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 回复 -->
		<view class="replyInput" v-if="isActive==2">
			<input type="text" value="" @confirm="sendReply" confirm-type="发送" v-model="replyContent" :placeholder="replyText" />
		</view>
		<u-popup v-model="showReply" mode="bottom" safe-area-inset-bottom><view class="delBtn" @click="delReplyBtn">删除</view></u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				detaiList:[],
				w_h:1.3,
				isActive: 1,
				baseimg:this.$static,
				danmuList: [{
				                    text: '第 1s 出现的弹幕',
				                    color: '#ff0000',
				                    time: 1
				                },
				                {
				                    text: '第 3s 出现的弹幕',
				                    color: '#ff00ff',
				                    time: 3
				                }
				],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				currentSwiper:0,
				createTime:'',
				commonList:[],
				time_list:[],
				content: '',//富文本内容
				style: {
					// 字符串的形式，富文本样式
					p: 'color: #333;font-size:32rpx',
					span: 'font-size: 30rpx'
				},
				forwardList:[],//转发列表
				supportList:[],//点赞列表
				
				replyObj:{}, //回复对象
				replyText:'我也说一句~', //评论框的placeholder
				replyContent:'', //回复的内容
				replyStatus:false, //回复还是自己评论，false评论，true回复
				showReply:false, //删除评论弹出
				delReplyId:null, //需要删除的评论id
				type:'',
			}
		},
		onLoad(option) {
			console.log(option,"yemian参数")
			this.case_id = option.id
			this.type = option.type
			this.getCaseInfo()
		},
		methods:{
			// 获取信息及 转发 评论 点赞列表
			getCaseInfo(){
				let params = {
					id:this.case_id,
					type:this.type,
				}
				this.$api.designCase_GetDetail(params).then(res=>{
					if(res.code==1){
						this.detaiList = res.data
						this.content = res.data.content
						let date = this.detaiList.create_time
						this.createTime = this.$utils.getFormatDate(date*1000)
						let param={
							case_id:this.case_id,
							type:this.type,
						}
						this.$api.designCase_getCommentList(param).then(res=>{
							console.log(res,"评论列表")
							if(res.code==1){
								this.commonList = res.data
							}
						})
						this.$api.designCase_getForwardList(param).then(res=>{
							console.log(res,"转发列表")
							if(res.code==1){
								this.forwardList = res.data
							}
						})
						this.$api.designCase_getSupportList(param).then(res=>{
							console.log(res,"点赞列表")
							if(res.code==1){
								this.supportList = res.data
							}
						})
					}
				})
			},
			handleBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			switchType(type) {
				this.isActive = type;
				this.replyStatus = false
				this.replyText = '我也说一句~'
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current
				console.log(this.currentSwiper,"下标")
			},
			
			// 回复第一层
			replyOne(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第一层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复第二层
			replyChild(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第二层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复评论时键盘确定
			sendReply(){
				if(this.replyContent==''){
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}else{
					// 自己评论
					if(!this.replyStatus){
						let params = {
							user_id:this.$store.state.index.userId,
							case_id:this.case_id,
							type:this.type,
							content:this.replyContent
						}
						console.log(params,'自己评论的数据')
						this.$api.toCaseAsk(params).then(res=>{
							console.log(res,'自己评论的结果')
							if(res.code==1){
								this.getCaseInfo()
								this.replyContent = ''
								uni.showToast({
									title:'评论成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}else{ //回复
						let params = {
							user_id:this.$store.state.index.userId,
							comment_id:this.replyObj.id,
							type:this.type,
							content:this.replyContent
						}
						console.log(params,'回复的数据')
						this.$api.toCaseReply(params).then(res=>{
							console.log(res,'回复的结果')
							if(res.code==1){
								this.getCaseInfo()
								this.replyContent = ''
								this.replyStatus = false
								this.replyText = '我也说一句~'
								uni.showToast({
									title:'回复成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}
				}
			},
			
			// 长按删除评论
			delReply(id){
				console.log(id,'回复id')
				this.delReplyId = id
				this.showReply = true
			},
			// 删除按钮
			delReplyBtn(){
				uni.showModal({
					content:'确定删除该评论吗？',
					success:res=>{
						if(res.confirm){
							this.$api.delCaseComment({comment_id:this.delReplyId,type:this.type}).then(res=>{
								console.log(res,'删除评论结果')
								if(res.code==1){
									this.getCaseInfo()
									this.showReply = false
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
		},
	}
</script>

<style scoped lang="less">
	.swiper {
		height: 560rpx;
	}
	.swiper-item {
		display: block;
		height: 560rpx;
		line-height: 560rpx;
		text-align: center;
	}
	.container{
		// 回复框
		.replyInput{
			width: 100%;
			position: fixed;
			bottom: 0;
			box-shadow: 0 0 12rpx #F1F1F1;
			left: 0;
			height: 80rpx;
			height: calc(80rpx+ constant(safe-area-inset-bottom));
			height: calc(80rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			input{
				width: 702rpx;
				height: 60rpx;
				margin: 10rpx auto;
				background-color: #F1F1F1;
				padding: 0 20rpx;
				border-radius: 30rpx;
			}
		}
		// 删除评论按钮
		.delBtn{
			height: 88rpx;
			width: 100%;
			font: 500 28rpx/88rpx PingFang SC;
			color: #333;
			text-align: center;
		}
		.swiper-content{
			position: relative;
			width: 750rpx;
			height: 450rpx;
			.icon-fanhui{
				z-index: 99;
				color: #fff;
				font-size: 50rpx;
				font-weight: 400;
				line-height: 20px;
				margin: 28rpx;
				position: absolute;
				top: 40rpx;
				left: 16rpx;
			}
			.my-video{
				width: 100%;
			}
		}
		.content{
			background-color: #FFF;
			margin-top: 100rpx;
			font-size: 32rpx;
			line-height: 1.8;
			padding: 40rpx 32rpx;
			// z-index: 9999;
			.title{
				font-size: 40rpx;
				font-weight: 500;
				line-height: 56rpx;
				color: #333333;
				margin: 20rpx 0;
			}
			.offer{
				font-size: 24rpx;
				line-height: 44rpx;
				color: #939393;
				span{margin-left: 10rpx;}
			}
			.create{
				font-size: 24rpx;
				line-height: 44rpx;
				color: #939393;
				margin: 40rpx 0;
			}
			.appeal{
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #333333;
			}
			.appeal-content{
				font-size: 28rpx;
				line-height: 48rpx;
				color: #333333;
				margin: 24rpx 0;
			}
			.project{
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #333333;
				margin: 28rpx 0;
			}
			.project-content{
				font-size: 28rpx;
				line-height: 48rpx;
				color: #333333;
			}
			.floor-plan{
				margin: 58rpx 0;
				.title{
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: #333333;
				}
				.floor-img{
					width: 686rpx;
					height: 436rpx;					
					border-radius: 8rpx;
				}
			}
			.bathroom{
				
				.title{
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: #333333;
				}
				.bathroom-img{
					width: 686rpx;
					height: 376rpx;
					border-radius: 8rpx;
					margin: 28rpx 0;
				}
				.bathroom-content{
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;					
				}
				
			}
			.kitchen{
				margin-top: 32rpx;
				.title{
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: #333333;
				}
				.kitchen-img{
					width: 686rpx;
					height: 376rpx;
					border-radius: 8rpx;
					margin: 28rpx 0;
				}
				.mini-logo{
					padding: 20rpx 40rpx;
					margin: 28rpx 0;
					.name{
						font-size: 28rpx;
						font-weight: 600;
						line-height: 48rpx;
						color: #333333;
					}
					.logo{
						width: 66rpx;
						height: 66rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
					}
					.logo-more{
						width: 32rpx;
						height: 32rpx;
					}
				}
				.kitchen-content{
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;
					margin: 28rpx 0;
				}
			}
		}
		.place {
			width: 100%;
			height: 20rpx;
			background-color: #F8F8F8;
		}
		.comment-box {
			background-color: #fff;
			// height: 650rpx;						
			.tab-nav{
				// width: 100%;
				padding: 0 28rpx;
				border-top: 1rpx solid #f2f2f2;
				background-color: #fff;
				.nav_title {
					float: left;
					height: 88rpx;
					line-height: 88rpx;
					min-width: 22%;
					text-align: center;
					font-size: 30rpx;
					font-family: "PingFang";
					color: #A0A0A0;
					&:last-child {
						float: right;
					}
				}
				
			}
			.active {
				position: relative;
				color: #000;
			}
			.active::after {
				content: "";
				position: absolute;
				width: 100rpx;
				height: 4rpx;
				background-color: #DBA954;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
			}
		
			.list {
				width: 100%;
				display: block;
				position: relative;
				border-top: 1rpx solid #F4F4F4;
				margin-top: 10rpx;
				// margin-bottom: ;
				padding-bottom: constant(safe-area-inset-bottom);				padding-bottom: env(safe-area-inset-bottom);
				.nav_item {
					width: 100%;
					padding: 20rpx 0;
					.open-more {
						padding:28rpx 0;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 44rpx;
						color: #DBA954;
						text-align: center;
					}
					
				}
				
				.comment{
					margin-top: 16rpx;
					padding: 12rpx 24rpx;
					margin-bottom: 80rpx;
					background-color: #fff;
					.item{
						display: flex;
						// position: relative;
						image{
							width: 56rpx;
							height: 56rpx;
							flex-shrink: 0;
							border-radius: 50%;
							margin-right: 16rpx;
						}
						.ask{
							.name{
								display: flex;
								align-items: center;
								font: 400 20rpx/40rpx PingFang SC;
								color: #939393;
								span{
									 
									background-color: #F6F7FB;
									border-radius: 28rpx;
									padding: 0 12rpx;
									height: 28rpx;
									font: 400 20rpx/28rpx PingFang SC;
									color: #333;
									margin-left: 8rpx;
								}
							}
							.info{
								// display: flex;
								font: 400 24rpx/44rpx PingFang SC;
								color: #333;
								span{
									font: 400 20rpx/40rpx PingFang SC;
									color: #939393;
									margin-left: 16rpx;
								}
							}
						}
						.askList{
							display: flex;
							flex-direction: column;
							.item{margin-top: 16rpx;}
							display: flex;
							image{
								flex-shrink: 0;
								width: 48rpx;
								height: 48rpx;
								margin-right: 16rpx;
								border-radius: 50%;
							}
						}
						// .delBox{
						// 	position: absolute;
						// 	top: 0;
						// 	right: 0;
						// 	height: 50rpx;
						// 	padding: 0 20rpx;
						// 	border-radius: 16rpx;
						// 	background-color: #ccc;
						// 	font: 400 22rpx/50rpx PingFang SC;
						// 	box-shadow: 0 0 10rpx #F0F0F0;
						// }
					}
				}
				.content-list {
					padding: 20rpx 20rpx 0 20rpx;
					
					&:last-child {
						border-bottom:none;
					}
				}
				.sub-list {
					padding-top: 20rpx;
					border-bottom: 2rpx solid #F4F4F4;
					&:last-child {
						border-bottom:none;
					}
				}
				.content-list,.sub-list {
					display: flex;
					
				.user-img {
					width: 56rpx;
					height: 56rpx;
					background: rgba(0, 0, 0, 0);
					border-radius: 100%;
					margin-right: 15rpx;
				}
				.user-name {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #939393;
				}
				.status {
					font-size: 24rpx;
				
					font-weight: 400;
					line-height: 36rpx;
					color: #333333;
					.time {
						font-size: 20rpx;
						font-weight: 400;
						color: #939393;
						padding-left: 10rpx;
						
					}
				}
			}
		}
		}
	}
</style>
